<template>
  <div class="mypoint-container">
    <!-- TODO 小程序文字滚动 -->
    <text-marquee
      v-if="isShowAlert"
      :marqueeText="draw_alert"
    ></text-marquee>
    <div
      class="my-point"
      :style="`background-image:url(${pointBg});background-repeat:no-repeat;background-size:100% 100%;background-position:center;`"
    >
      <div class="point">
        <div class="point-alais">
          <p class="point-num fontGilroy">{{point}}</p>
          <div class="dz-point" v-if="integral_conversion_dz == 1 && integral_conversion_programme">
            约{{integral_conversion_value}}{{integral_conversion_programme}}
          </div>
        </div>


        <div class="point_overdue_freeze">
          <div class="point_num overdue" v-if="month_will_expire_point">
            <p>30天内到期{{ point_name }}</p>
            <p>{{ month_will_expire_point }}</p>
          </div>
          <div class="point_num freeze" v-if="freeze_point">
            <p>冻结{{ point_name }}</p>
            <p>{{ freeze_point }}</p>
          </div>
        </div>
      </div>
      <!--   现金积分 定制 start   -->
      <div
        class="zhuan-btn"
        v-if="dzCashPoint.dz_cash_point"
        @click="zhuanPointClick()"
      >
        转换{{cash_point_alais}}
      </div>
      <!--   现金积分 定制 end   -->
      <div class="getpros shadow-box">
        <a
          href="javascript:;"
          class="change-item"
          v-if="is_point_red > 0"
          @click="Jump('pointRedPacket')"
        >
          <i class="icon_red_packet"></i>
          <span class="item-title">兑换红包</span>
        </a>
        <a
          href="javascript:;"
          class="change-item"
          v-if="is_exchange_point > 0"
          @click="Jump('pointExchange')"
        >
          <i class="icon_goods"></i>
          <span class="item-title">兑换商品</span>
        </a>
        <a
          href="javascript:;"
          class="change-item"
          v-if="is_exchange_point > 0"
          @click="Jump('pointOrder')"
        >
          <!-- @click="Jump('pointOrder')" -->
          <i class="icon_order"></i>
          <span class="item-title">兑换订单</span>
        </a>

        <a
          href="javascript:;"
          class="change-item pointRank"
          v-if="is_point_rank > 0"
          @click="Jump('pointRank')"
        >
          <i class="icon_rank"></i>
          <span class="item-title">{{ point_name }}排行</span>
        </a>
        <a
          href="javascript:;"
          class="change-item J-point-send"
          v-if="is_point_send > 0"
          @click="clickSendPoint"
        >
          <i class="icon_send"></i>
          <span class="item-title">赠送{{ point_name }}</span>
        </a>
      </div>
    </div>
    <van-dialog
      v-model="showSendDialog"
      :title="'赠送' + point_name"
      show-cancel-button
      confirm-button-text="确定"
      @confirm="clickConfirmSend"
      class="common-confirm"
      @close="clickCloseDialog"
    >
      <div class="donation-box">
        <div class="con-box">
          <div class="input-box clearfix">
            <label for="">会员ID：</label
            ><input
              type="number"
              name="friend_uid"
              id="J-get-info"
              v-model="sendPointForm.friend_uid"
            />
            <span class="info"></span>
          </div>
          <div class="input-box clearfix">
            <label for="">数量：</label
            ><input type="number" name="point" v-model="sendPointForm.point" />
          </div>
        </div>
      </div>
    </van-dialog>

    <div class="point-log shadow-box">
      <h2>
        <i></i><span>{{ point_name }}明细</span>
      </h2>
      <!-- <li style="padding:66px 0px;text-align:center;">
					<img src="__MOBIMG__/user/no_integral_record.png" width="20.9%" alt="">
					<p class="no_data_member">暂无{{point_name}}记录</p>
				</li> -->
      <div v-if="pointLog.length > 0">
        <template v-if="!hzwDz">
          <van-list
            v-model="loading"
            :finished="finished"
            :error.sync="error"
            error-text="请求失败，点击重新加载"
            finished-text=""
            @load="onLoad"
          >
            <div
              class="point-log-item"
              v-for="(row, index) in pointLog"
              :key="index"
            >
              <h3>{{ row.title }}</h3>
              <p class="time">{{ row.create_time }}</p>
              <span class="num" v-if="row.is_add == 1"
                >+{{ row.change_num }}</span
              >
              <span class="num" v-else>-{{ row.change_num }}</span>
            </div>
          </van-list>
        </template>
        <!-- 杭州湾 定制 去除 分页 start -->
        <template v-else>
          <div class="point-log-item" v-for="(row,index) in pointLog" :key="index">
						<h3>{{row.title}}</h3>
						<p class="time">{{row.create_time}}</p>
						<span class="num" v-if="row.is_add==1">+{{row.change_num}}</span>
						<span class="num" v-else>-{{row.change_num}}</span>
					</div>
        </template>
         <!-- 杭州湾 定制 去除 分页 end -->
      </div>
      <div v-else>
        <no-data :noData="noData"></no-data>
      </div>
    </div>
    <!--  转为现金积分弹窗  定制  -->
    <van-dialog
      v-model="showZhuanDialog"
      show-cancel-button
      confirm-button-text="确定"
      class="common-confirm"
      :before-close="zhuanXianJintongClick"
    >
      <div class="donation-box">
        <div class="con-box">
          <div class="input-box clearfix zhuan-box">
            <input
              type="number"
              name="point"
              placeholder="请输入转换的积分数量"
              v-model="zhuanPointForm.point"
            />
          </div>
          <p class="tips tips-zhuan">
            预计到账：{{ accountPTNum }}个{{ cash_point_alais }}
          </p>
        </div>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import Vue from "vue";
import { getPointInfo, transferPoint } from "@/api/user/member/memberApi";
import noData from "@/components/noData/index";
import textMarquee from "@/components/textMarquee"; // 文字滚动
import { Dialog } from "vant";
import StoreSave from "@/utils/store";
import { dzCashPointConvert } from "@/api/dz/dzXianjinjifen";
// 全局注册
Vue.use(Dialog);
import "vant/lib/dialog/style";
export default Vue.extend({
  name: "index",
  components: {
    noData,
    textMarquee,
  },
  data() {
    return {
      isShowAlert: true,
      showSendDialog: false,
      noData: {
        img: "https://img.wifenxiao.com/h5-wfx/images/no_collection_goods.png",
        text: "暂无数据",
      },
      point_name: "积分",
      point: "",
      is_point_red: "", // 积分兑换红包
      is_exchange_point: "", // 积分兑换商品
      is_point_rank: "", // 积分排行
      is_point_send: "", // 赠送积分
      pointBg: "https://img.wifenxiao.com/h5-wfx/images/user/point_bg.png",
      pointLog: [
        /* {
          title: '名称',
          create_time: '2019-10-10 12:12:12',
          is_add: '1',
          change_num: '39'
        } */
      ],
      loading: false,
      finished: false,
      error: false,
      p: 2,
      sendPointForm: {
        friend_uid: "",
        point: "",
        type: 1,
      },
      pointOrderUrl: "",
      // 积分过期冻结
      draw_alert: "",
      will_expire_point: "",
      month_will_expire_point: '',
      point_will_time: "",
      freeze_point: "",
      freeze_time: "",
      scale: 2,
      isScale: false,
      num: 5,
      showZhuanDialog: false,
      zhuanPointForm: {
        point: "",
      },
      dzCashPoint: {}, // 现金积分定制
      cash_point_alais: "",
      integral_conversion_dz: 0, // 积分换算定制开关
      integral_conversion_proportion: 0, // 积分换算比例
      integral_conversion_programme: '', // 积分换算文案
      integral_conversion_value: 0 // 积分换算最终值
    };
  },
  computed: {
    accountPTNum: function () {
      if (this.zhuanPointForm.point) {
        if (this.dzCashPoint.dz_std_to_cash_percent > 0) {
          return (
            Number(this.zhuanPointForm.point) -
            Math.ceil(
              Number(this.zhuanPointForm.point) *
                (this.dzCashPoint.dz_std_to_cash_percent / 100)
            )
          );
        } else {
          return this.zhuanPointForm.point;
        }
      } else {
        return 0;
      }
    },
  },
  methods: {
    Jump(url, data) {
      this.$JumpPath(this, url, data);
    },
    init() {
      this.$loadingWrap.show();
      setTimeout(() => {
        this.$loadingWrap.close();
      }, 10000);
      getPointInfo().then((res) => {
        this.$loadingWrap.close();
        if (res.status == 1) {
          const resData = res.data;
          // 页面title
            wx.setNavigationBarTitle({
              title: resData.ftitle_point,
            })
          this.point_name = resData.point_name || "积分";
          this.point = resData.point;
          this.is_point_red = resData.is_point_red;
          this.is_exchange_point = resData.is_exchange_point;
          this.is_point_rank = resData.is_point_rank;
          this.is_point_send = resData.is_point_send;
          this.pointLog = resData.list;
          this.pointOrderUrl = resData.point_order_url;
          this.will_expire_point = resData.will_expire_point;
          this.month_will_expire_point = resData.month_will_expire_point
          this.point_will_time = resData.point_will_time;
          this.freeze_point = resData.freeze_point;
          this.freeze_time = resData.freeze_time;
          if (this.will_expire_point && this.freeze_point) {
            this.draw_alert =
              this.will_expire_point +
              "个" +
              this.point_name +
              "将在" +
              this.point_will_time +
              "到期，冻结积分将在" +
              this.freeze_time +
              "返还";
          } else if (this.will_expire_point && !this.freeze_point) {
            this.draw_alert =
              this.will_expire_point +
              "个" +
              this.point_name +
              "将在" +
              this.point_will_time +
              "到期";
          } else if (!this.will_expire_point && this.freeze_point) {
            this.draw_alert = "冻结积分将在" + this.freeze_time + "返还";
          } else if (!this.will_expire_point && !this.freeze_point) {
            this.isShowAlert = false;
          }
          if (resData.pointBg) {
            this.pointBg = resData.pointBg;
          }

          // 积分换算定制 start
          const integral_conversion_dz = this.integral_conversion_dz = resData.integral_conversion_dz
          this.integral_conversion_programme = resData.integral_conversion_programme
          if (integral_conversion_dz == 1) {
            const integral_conversion_proportion = this.integral_conversion_proportion = resData.integral_conversion_proportion
            const integral_conversion_value = this.point * integral_conversion_proportion / 100
            this.integral_conversion_value = parseFloat(integral_conversion_value).toFixed(2)
          }
          // 积分换算定制 end

          // 现金积分 定制
          if (
            resData.dz_std_to_cash_percent &&
            resData.dz_std_to_cash_percent > 0
          ) {
            this.dzCashPoint.dz_std_to_cash_percent =
              resData.dz_std_to_cash_percent;
          } else {
            this.dzCashPoint.dz_std_to_cash_percent = 0;
          }
          if (resData.cash_point_alais) {
            this.cash_point_alais = resData.cash_point_alais;
          }
        } else {
          this.$Error(res.msg);
        }
      });
    },
    /* // 积分兑换商品订单
    clickPointOrder() {
      window.location.href = this.pointOrderUrl
    }, */
    // 点击转赠积分
    clickSendPoint() {
      this.showSendDialog = true;
    },
    // 点击确定转赠
    clickConfirmSend() {
      this.$loadingWrap.show();
      setTimeout(() => {
        this.$loadingWrap.close();
      }, 10000);

      transferPoint(this.sendPointForm).then((res) => {
        this.$loadingWrap.close();
        if (res.status == 1) {
          this.$Error("赠送成功");
          this.clickCloseDialog();
        } else {
          this.$Error(res.msg);
        }
      });
    },
    // 关闭转赠积分弹窗
    clickCloseDialog() {
      this.showSendDialog = false;
    },
    // 关闭转赠积分弹窗执行
    closeDialog() {
      this.sendPointForm.friend_uid = "";
      this.sendPointForm.point = "";
    },
    onLoad() {
      this.loading = true;
      const data = {
        p: this.p,
      };
      getPointInfo(data)
        .then((res) => {
          this.loading = false;
          if (res.data.length) {
            this.pointLog.push(...res.data);
            this.p++;
          } else {
            this.finished = true;
          }
        })
        .catch(() => {
          this.error = true;
        });
    },
    zhuanPointClick() {
      this.zhuanPointForm.point = "";
      this.showZhuanDialog = true;
    },
    zhuanXianJintongClick(action, done) {
      if (action == "confirm") {
        if (!this.zhuanPointForm.point) {
          this.$Error("积分不能为空");
          done(false);
          return false;
        }
        this.$loadingWrap.show();
        setTimeout(() => {
          this.$loadingWrap.close();
        }, 10000);
        dzCashPointConvert({ type: 2, point: this.zhuanPointForm.point }).then(
          (res) => {
            this.init();
            this.$loadingWrap.close();
            if (res.status == 1) {
              done();
              this.zhuanPointForm.point = "";
              this.showZhuanDialog = false;
              this.$Error("转换成功");
            } else {
              done(false);
              this.$Error(res.msg);
            }
          }
        );
      } else {
        done();
        this.zhuanPointForm.point = "";
        this.showZhuanDialog = false;
      }
    },
  },
  created() {
    /* 杭州湾 去除分页 */
    this.sid = StoreSave.fetchLocal('sid')
    // const shop = this.$route.query.sid
    const hzwDz = this.$_shop('$_ZJHL_DZ', this.sid)
    this.hzwDz = hzwDz
    
    this.init();
    // 现金积分 定制
    if (StoreSave.fetchLocal("cashPoint")) {
      this.dzCashPoint = StoreSave.fetchLocal("cashPoint");
      // console.log(this.dzCashPoint);
    }
  },
  mounted() {
    // 小程序触底加载更多
    window.addEventListener("reachbottom", () => {
      this.onLoad();
    });
  },
});
</script>

<style lang="scss">
@import "../../../../styles/mixin";
.mypoint-container {
  .shadow-box {
    box-shadow: 0 2px 18px rgba(82, 82, 82, 0.06);
  }
  .my-point {
    position: relative;
    // height: 419px;
    padding: 72px 0 0;
    // background: url(https://img.wifenxiao.com/h5-wfx/images/user/point_bg.png) no-repeat;
    // background-size: 100%;
    .point {
      text-align: center;
      padding-bottom: 64px;
			.point-alais {
        width: 100%;
        display: flex;
        justify-content: center;
      }
      .dz-point {
        display: inline-block;
        background: red;
        color: #fff;
        font-size: 26px;
        height: 42px;
        line-height: 42px;
        padding-left: 15px;
        padding-right: 20px;
        border-radius: 21px;
        border-bottom-left-radius:0px;
        position: relative;
        top: -22px;
        margin-left: 10px;
      }
    }
    .point-name {
      margin-top: 4px;
      font-size: 26px;
      color: #ffd9dd;
    }
    .point-num {
      font-size: 50px;
      line-height: 1.2;
      font-weight: bold;
      color: #fff;
      margin-bottom: 24px;
    }
    .point_overdue_freeze {
      display: flex;
      justify-content: space-around;
      align-items: center;
      font-size: 30px;
      color: #fff;
      > div > p {
        line-height: 1;
        margin-bottom: 18px;
        &:last-child {
          font-weight: bold;
          margin-bottom: 0;
        }
      }
    }
  }
  .getpros {
    margin: 0 25px;
    border-radius: 7px;
    background: #fff;
    display: flex;
    // justify-content: space-between;
    justify-content: space-around;
    border-radius: 20px;
    .change-item {
      padding: 30px 0;
      i {
        display: block;
        width: 46px;
        height: 46px;
        margin: 0 auto;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: auto 100%;
        &.icon_red_packet {
          background-image: url(https://img.wifenxiao.com/h5-wfx/images/user/point/point_red_packet.png);
        }
        &.icon_goods {
          background-image: url(https://img.wifenxiao.com/h5-wfx/images/user/point/point_goods.png);
        }
        &.icon_order {
          background-image: url(https://img.wifenxiao.com/h5-wfx/images/user/point/point_order.png);
        }
        &.icon_rank {
          background-image: url(https://img.wifenxiao.com/h5-wfx/images/user/point/point_rank.png);
        }
        &.icon_send {
          background-image: url(https://img.wifenxiao.com/h5-wfx/images/user/point/point_send.png);
        }
      }
      .item-title {
        display: block;
        margin-top: 22px;
        font-size: 22px;
      }
    }
  }
  .point-log {
    margin: 20px 25px;
    padding: 25px 30px;
    border-radius: 7px;
    background: #fff;
    border-radius: 25px;
    h2 {
      i {
        display: inline-block;
        width: 5px;
        height: 28px;
        margin-right: 8px;
        vertical-align: -2px;
        background: #f3152b;
      }
      padding: 10px 0;
      font-size: 32px;
      font-weight: 700;
    }
    .point-log-item {
      position: relative;
      padding: 34px 120px 34px 0;
      border-bottom: 1px solid #ededed;
      h3 {
        font-size: 28px;
        line-height: 1.2;
      }
      .time {
        margin-top: 16px;
        font-size: 24px;
        color: #999;
      }
      .num {
        position: absolute;
        right: 4px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 32px;
        color: #fd2049;
        font-weight: bold;
      }
    }
  }
  .donation-box {
    .con-box {
      position: relative;
      padding: 40px 60px;
    }
    .input-box {
      margin: 16px 0;
      font-size: 28px;
      label {
        float: left;
        display: block;
        width: 150px;
        line-height: 76px;
        text-align: right;
        font-weight: normal;
        color: #666666;
      }
      input {
        float: left;
        -webkit-appearance: none;
        width: 256px;
        height: 76px;
        padding: 16px 10px;
        border: 2px solid #ededed;
        border-radius: 6px;
      }
    }
  }
}
.zhuan-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 26px;
  color: white;
  text-align: center;
  line-height: 40px;
  width: 140px;
  height: 40px;
  background-color: #ffae00;
  border-radius: 5px;
}
.tips {
  font-weight: normal; 
  color: #666666;
  font-size: 24px;
  text-indent: 70px;
}
.tips-zhuan {
  text-indent: 0 !important;
  margin-top: 50px;
}
.zhuan-box {
  input {
    width: 100% !important;
  }
}
</style>